<template>
  <div>
      <div class="nav-container" >
          <div class="active">首页</div>
          <div>关于我们</div>
          <div>职位</div>
          <div>首页</div>
      </div>
      <div class="main-container">
          <div class="banner">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3447840572,3454534876&fm=26&gp=0.jpg" alt="" style="width:100%">
          </div>
          <div class="xxx">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>
          <div class="xxx">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        <div class="xxx">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>
<style scoped>
  .nav-container{
    height: 80px;
    position: sticky;
    top:0;
    z-index: 2;
    display: flex;
    background: #ffffff;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 16px;
    color: #202020;
  }

  .nav-container > div{
     margin-right: 2em;
  }
  .nav-container .active{
    color:#ff7d06;

  }
  .banner{
    height: 400px;
    overflow: hidden;
  }
  .xxx{
    display: flex;
    justify-content: center;
  }

  .xxx >div{
    width: 200px;
    height: 100px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin: 1em 1em;

  }
  .main-container{
    height:calc(100vh - 80px);
    overflow: auto;
  }
</style>
